<template>
  <div class="tw-libtext"
    :style="style"
    style="-webkit-box-orient: vertical;"
    :class="{[`x${this._uid}`]:true,
    xmulti: isMultiLine,
    xsingle: isSingle && !collapsible,
    xcollapsed: collapsible && collapsed,
    xexpanded: collapsible && !collapsed}">
    <div class="tw-libtext-content"
      v-html="dataIsFromPortal ? (list[0].content || propText || text.content) : (propText || text.content) "></div>
    <div v-if="collapsible"
      class="tw-libtext-btnbox">
      <a class="tw-libtext-btn"
        @click="collapsed=!collapsed">{{collapsed?'展开':'收起'}}</a>
    </div>
  </div>
</template>

<script>
import props from './props'

export default {
  name: 'header-navigate',

  props,

  data() {
    return {
      collapsed: true,
      list: []
    }
  },

  computed: {
    style() {
      return {
        padding: this.padding,
        lineHeight: this.lineHeight,
        letterSpacing: this.letterSpacing,
        fontFamily: this.fontFamily,
        fontSize: this.fontSize,
        fontWeight: this.fontWeight ? '700' : '400',
        background: this.bgColor,
        color: this.color,
        shadow: this.shadow,
        shadowSize: this.shadowSize,
        textAlign: this.align,
        highlightTextFontSize: this.highlightTextFontSize,
        highlightTextColor: this.highlightTextColor,
        collapseBtnColor: this.collapseBtnColor,
        lineNum: this.lineNum
      }
    }
  },

  methods: {
    setStyle() {
      const style = `
        ::root.tw-libtext {
          letter-spacing: ${this.letterSpacing};
          text-shadow: ${
            this.shadow ? `${this.shadowSize} ${this.shadow}` : 'none'
          };
        }

        ::root.tw-libtext {
          -webkit-line-clamp: ${this.lineNum};
        }

        ::root.tw-libtext i {
          font-size: ${this.highlightTextFontSize};
          color: ${this.highlightTextColor};
          font-weight: ${this.highlightTextIsBold ? '700' : '400'};
        }

        ::root.tw-libtext .tw-libtext-btn {
          color: ${this.collapseBtnColor};
          border-color: ${this.collapseBtnColor};
        }

        ::root.tw-libtext .tw-libtext-btn:after {
          border-left-color:  ${this.collapseBtnColor};
          border-bottom-color:  ${this.collapseBtnColor};
        }
      `
      this.addStyle(style)
    },

    addStyle(style) {
      this.$el.classList.add(`x${this._uid}`)
      const styleEl =
        document.getElementById(this._uid) || document.createElement('style')
      styleEl.id = this._uid
      styleEl.innerText = style
        .replace(/::root/gm, `.x${this._uid}`)
        .replace(/\n/gm, '')

      document.head.appendChild(styleEl)
    },

    /***
     * ?????
     */
    initData() {
      if (this.dataIsFromPortal) {
        this.getData()
      }
    },

    /***
     * ???????
     */
    getData() {
      if (this.dataIsFromPortal) {
        const params = {
          condition: {
            siteId: this.$siteConfig.siteId
          },
          pageId: this.moudleId,
          pageNo: 1,
          pageSize: 1
        }
        params.condition.pageId = this.moudleId
        window.axios
          .post(
            `${window.$twApp.gateway}/unified-portal/site/query/page`,
            params
          )
          .then(resp => {
            this.list = []
            if (resp.data.serverResult.resultCode && resp.data.result) {
              this.list = resp.data.result.map((item, idx) => {
                return {
                  content: item.navigateName || item.name
                }
              })
            } else {
            }
          })
          .catch(e => {
            this.$ui.msg({
              type: 'error',
              message: '??????'
            })
          })
      }
    }
  },

  created() {
    this.initData()
  },

  mounted() {
    this.setStyle()
  },

  watch: {
    highlightTextIsBold() {
      this.setStyle()
    },

    style: {
      deep: true,
      handler() {
        this.setStyle()
      }
    },

    dataIsFromPortal: {
      deep: true,
      handler() {
        this.initData()
      }
    },

    moudleId: {
      deep: true,
      handler() {
        this.getData()
      }
    }
  }
}
</script>

<style lang="scss">
@import './css/index.scss';
</style>
